<template>
  <div id="app">
     <section id="footer">
        <ul>
          <router-link to="/" tag="li"><span></span>首页</router-link> 
          <router-link to="/find" tag="li"><span></span>发现</router-link>
          <router-link to="/order" tag="li"><span></span>订单</router-link>
          <router-link to="/mine" tag="li"><span></span>我的</router-link>
        </ul>
      </section>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
    *{
      box-sizing: border-box;
    }

    body {
      background-color: #fbf9fe;

    }
    *{
      box-sizing: border-box;
    }
   li{
        list-style: none;
    }
    ul{
        margin: 0px;
        padding: 0px;

    }

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center;*/
  color: #2c3e50;
  // overflow-x: hidden;  
}
html,body{
  margin:0px;
  height:100%;
}
#app{
    position: absolute;
    height: 100%;
    width:100%;
}
/* 底部导航 */
#footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 2.5rem /* 40/16 */;
    background-color: white;
    z-index: 1001;
    font-size: .625rem /* 10/16 */;
}
#footer li{
    display: block;
    float: left;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    cursor: pointer;
}
#footer li span{
  display:block;
  width:1rem;
  height:1rem;
  // border: 1px solid red;
  margin:  .15625rem /* 2.5/16 */ auto;
  margin-top: .3125rem /* 5/16 */;
  
}
#footer li:nth-child(1) span{
  background-image: url(../static/icon/home.png);
  background-size: 100% 100%;
}
#footer li:nth-child(2) span{
  background-image: url(../static/icon/find.png);
  background-size: 100% 100%;
}
#footer li:nth-child(3) span{
  background-image: url(../static/icon/order.png);
  background-size: 100% 100%;
}
#footer li:nth-child(4) span{
  background-image: url(../static/icon/mine.png);
  background-size: 100% 100%;
}

#footer li:last-child{
    border: none;
}
.router-link-active{
  color:red;
}
</style>
